var svgNS = "http://www.w3.org/2000/svg";


function button(id, parentNode, functionToCall, buttonText, x, y, width, height)
{
	this.init(id, parentNode, functionToCall, buttonText, x, y, width, height);
}

button.prototype.init = function(id, parentNode, functionToCall, buttonText, x, y, width, height)
{
	this.id = id; //the id where all new content is appended to
	this.parentNode = parentNode; //the id or node reference of the parent group where the button can be appended
	this.functionToCall = functionToCall; //function to be called if button was pressed
	this.buttonText = buttonText; //default value to be filled in when button is created
	this.x = x; //left of button rectangle
	this.y = y; //top of button rectangle
	this.width = width; //button rectangle width
	this.height = height; //button rectangle height
	this.createButton(); //method to initialize button
}

button.prototype.createButton = function()
{
	var result = this.testParent();
	if (result)
	{
		this.background = document.createElementNS(svgNS,"rect");
		this.background.setAttributeNS(null,"x",this.x);
		this.background.setAttributeNS(null,"y",this.y);
		this.background.setAttributeNS(null,"rx",8);
		this.background.setAttributeNS(null,"ry",8);
		this.background.setAttributeNS(null,"width",this.width);
		this.background.setAttributeNS(null,"height",this.height);
		this.background.setAttributeNS(null,"style","fill:#000000;");

		this.foreground = document.createElementNS(svgNS,"rect");
		this.foreground.setAttributeNS(null,"x",this.x + 3);
		this.foreground.setAttributeNS(null,"y",this.y + 3);
		this.foreground.setAttributeNS(null,"rx",4);
		this.foreground.setAttributeNS(null,"ry",4);
		this.foreground.setAttributeNS(null,"width",this.width - 6);
		this.foreground.setAttributeNS(null,"height",this.height - 6);
		this.foreground.setAttributeNS(null,"style","fill:#333333;");

		this.shine = document.createElementNS(svgNS,"rect");
		this.shine.setAttributeNS(null,"x",this.x + 3);
		this.shine.setAttributeNS(null,"y",this.y + 3);
		this.shine.setAttributeNS(null,"rx",2);
		this.shine.setAttributeNS(null,"ry",2);
		this.shine.setAttributeNS(null,"width",this.width - 6);
		this.shine.setAttributeNS(null,"height",(this.height - 6) / 2);
		this.shine.setAttributeNS(null,"style","fill:url(#buttonGradient)");

		this.buttonTextElement = document.createElementNS(svgNS,"text");
		this.buttonTextElement.setAttributeNS(null,"x",this.x + (this.width / 2));
		this.buttonTextElement.setAttributeNS(null,"y",this.y + (this.height / 2));
		this.buttonTextElement.setAttributeNS(null,"font-family","Verdana");
		this.buttonTextElement.setAttributeNS(null,"font-size",16);
		this.buttonTextElement.setAttributeNS(null,"fill","#ffffff");
		this.buttonTextElement.setAttributeNS(null,"style","dominant-baseline: central;text-anchor: middle;");
		var textNode = document.createTextNode(this.buttonText);
		this.buttonTextElement.appendChild(textNode);

		this.parentGroup.appendChild(this.background);
		this.parentGroup.appendChild(this.foreground);
		this.parentGroup.appendChild(this.shine);
		this.parentGroup.appendChild(this.buttonTextElement);
	}
	else
	{
		alert("could not create or reference 'parentNode' of button with id '"+this.id+"'");
	}
}

//test if parent group exists
button.prototype.testParent = function()
{
    //test if of type object
    var nodeValid = false;
    this.parentGroup = document.createElementNS(svgNS,"g");
	this.parentGroup.addEventListener("click",this,false);
    if (typeof(this.parentNode) == "object")
    {
    	if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g")
    	{
    		this.parentNode.appendChild(this.parentGroup);
    		nodeValid = true;
    	}
    }
    else if (typeof(this.parentNode) == "string")
    {
    	//first test if button group exists
    	if (!document.getElementById(this.parentNode))
    	{
        	this.parentGroup.setAttributeNS(null,"id",this.parentNode);
        	document.documentElement.appendChild(this.parentGroup);
        	nodeValid = true;
   		}
   		else
   		{
       		document.getElementById(this.parentNode).appendChild(this.parentGroup);
       		nodeValid = true;
   		}
   	}
   	return nodeValid;
}

//event handling
button.prototype.handleEvent = function(evt)
{
	if (evt.type == "mousedown")
	{
//		this.togglePressed("pressed");
		document.documentElement.addEventListener("mouseup",this,false);
	}
	if (evt.type == "mouseup")
	{
//		this.togglePressed("released");
		document.documentElement.removeEventListener("mouseup",this,false);
	}
	if (evt.type == "click")
	{
		//for some strange reasons I could not forward the evt object here ;-(, the code below using a literal is a workaround
		//attention: only some of the evt properties are forwarded here, you can add more, if you need them
		var timerEvt = {x:evt.clientX,y:evt.clientY,type:evt.type,detail:evt.detail,timeStamp:evt.timeStamp}
		this.functionToCall();
	}
}
